<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 通用工具栏 -->
      <page-tools>
        <template v-slot:left>
          当前页面数据有40条
        </template>
        <template v-slot:right>
          <el-button v-promission="'import_excel'" type="primary" @click="$router.push('/import')">导入文件</el-button>
          <el-button v-promission="'export_excel'" type="success" @click="exportExcel">导出文件</el-button>
          <el-button type="warning" @click="addEmployees">新增员工</el-button>
        </template>
      </page-tools>
      <el-table
        class="my-table"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50px"
        />
        <el-table-column
          prop="username"
          label="姓名"
        />
        <el-table-column
          property="workNumber"
          label="工号"
        />
        <el-table-column
          property="formOfEmployment"
          label="聘用形式"
        >
          <template slot-scope="scope">
            <div @click="fn(scope)">{{ transfromHireType(scope.row.formOfEmployment) }}</div>
          </template>
        </el-table-column>

        <el-table-column
          property="staffPhoto"
          label="照片"
          width="180"
        >
          <template slot-scope="scope">
            <!-- 在我们写媒体的时候， 一般element-ui会提供一些组件 el-image -->
            <!-- 二次封装组件，是项目公用的组件，需要放components里面 -->
            <!-- <img :src="scope.row.staffPhoto" width="100"> -->
            <img-preview :src="scope.row.staffPhoto" />
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门"
        />
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          sortable
        />
        <el-table-column label="操作" width="350px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="$router.push(`/employees/detail?id=${scope.row.id}` )"
            >查看</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="roleManager(scope.row.id)"
            >分配角色</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delRoleBtn(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="新增员工"
        :visible.sync="dialogVisible"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        @close="dialogClose"
      >
        <add-dialog ref="addRef" @close="dialogVisible=false" @success="dialogSuccess" />
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="roleDialogVisible"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <AssignRole
          v-if="roleDialogVisible"
          :current-id="currentId"
          @close="roleDialogVisible=false"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import PageTools from '@/components/pageTools'
import { getUserListRequest, delUserRequest } from '@/api/employees'
import globalConstant from '@/constant/employees'
import addDialog from './addDialog.vue'
import AssignRole from './AssignRole.vue'
// 数组查找法
// function test(id) {
//   const item = globalConstant.hireType.find(item => item.id === id)
//   if (item) {
//     return item.value
//   } else {
//     return '临时工'
//   }
// }
// console.log(test(123))
// 对象查找法
// function test2(id) {
//   const obj = {}
//   globalConstant.hireType.forEach(item => {
//     obj[item.id] = item.value
//   })
//   return obj[id] ? obj[id] : '临时工'
// }
// console.log(test2(123))
export default {
  name: 'VueZzwHrIndex',
  // components: {
  //   PageTools
  // },
  components: {
    addDialog,
    AssignRole
  },
  data() {
    return {
      activeName: '',
      tableData: [],
      pageInfo: {
        page: 1,
        size: 5
      },
      total: 0,
      dialogVisible: false,
      roleDialogVisible: false,
      // 点击了分配角色以后，获取的当前用户的id
      currentId: ''

    }
  },

  mounted() {

  },
  created() {
    // 调用渲染员工信息方法
    this.getUserList()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSizeChange() {},
    // 当前页面页码的修改的
    handleCurrentChange(value) {
      // console.log(value)
      this.pageInfo.page = value
      this.getUserList()
    },
    // 渲染员工列表
    async getUserList() {
      // console.log(111)
      try {
        const res = await getUserListRequest(this.pageInfo)
        // console.log(res)
        if (res.success) {
          this.total = res.data.total
          this.tableData = res.data.rows
        }
      } catch (error) {
        this.$message.error('获取员工列表失败')
      }
    },
    //
    transfromHireType(id) {
      // const item = globalConstant.hireType.find(item => item.id === id)
      // if (item) {
      //   return item.value
      // } else {
      //   return '临时工'
      // }
      const obj = {}
      globalConstant.hireType.forEach(item => {
        obj[item.id] = item.value
      })
      return obj[id] ? obj[id] : '临时工'
    },
    // 点击增加时打开模态框
    addEmployees() {
      this.dialogVisible = true
    },
    // 当子组件向外暴露sucess事件后调用该方法关闭模态框并重新渲染页面
    dialogSuccess() {
      this.dialogVisible = false
      this.getUserList()
    },
    // 当子组件向外暴露clone事件后调用该方法关闭模态框并重新渲染页面
    dialogClose() {
      this.$refs.addRef.reset()
    },
    // 点击删除按钮提示用户是否删除
    delRoleBtn(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 当用户点击确认后调用删除员工方法
        this.delRoleFn(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除员工方法,发请求根据id删除指定用户
    async delRoleFn(id) {
      const res = await delUserRequest(id)
      console.log(res)
      try {
        const res = await delUserRequest(id)
        console.log(res)
        if (res.success) {
          this.getUserList()
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        console.log('删除失败')
      }
    },
    exportExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: ['姓名', '年龄', '住址'],
          data: [
            ['彭翀', 9527, '前端85'],
            ['朱志文', 9527, '前端85'],
            ['杨优', 9527, '前端85'],
            ['韩钢', 9527, '前端85']
          ],
          filename: '二组帅哥美女名单',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    roleManager(id) {
      this.roleDialogVisible = true
      this.currentId = id
    }

  }
}
</script>
<style lang="scss" scoped>
.my-table {
  margin-top: 20px;
}
</style>
